<template>
  <div
    class="wrap-item"
    :style="{
      '--scroll-width': '80px',
    }"
  >
    <div class="wrap-btn-group">
      <span class="wrap-btn wrap-go-back" @click="go">返回</span>
    </div>
    <!-- 基本信息 -->
    <div class="wrap-other-roll">
      <!-- 基础信息 -->
      <div class="card">
        <div class="title">基本信息</div>
        <el-descriptions direction="vertical" :column="3" border>
          <el-descriptions-item>
            <template slot="label"> 昵称 </template>
            {{ basic.nickName }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 账号 </template>
            {{ basic.accountName }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 类型 </template>
            <span v-if="basic.userItemType == 1">用户</span>
            <span v-if="basic.userItemType == 2">企业</span>
            <span v-if="basic.userItemType == 3">专家</span>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 联系电话 </template>
            {{ basic.phone }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 所属角色 </template>
            <span v-for="(item, index) in basic.memberRoles" :key="index">
              {{
                item.roleName +
                (basic.memberRoles.length == index + 1 ? '' : ',')
              }}
            </span>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 状态 </template>
            <span v-if="basic.userStatus == 0">启用</span>
            <span v-if="basic.userStatus == 1">停用</span>
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 性别 </template>
            {{ basic.genderTxt }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 邮箱 </template>
            {{ basic.email }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 注册时间 </template>
            {{ basic.addTime }}
          </el-descriptions-item>
          <el-descriptions-item>
            <template slot="label"> 备注 </template>
            {{ basic.remark }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <!-- 请求参数 -->
      <div class="card">
        <div class="title">子账号信息</div>
        <!-- 数据列表 -->
        <el-table :data="list" :header-cell-style="{ background: '#F6F7F9' }">
          <el-table-column
            type="index"
            width="50"
            label="序号"
            align="center"
          ></el-table-column>
          <el-table-column prop="accountName" label="账号"></el-table-column>
          <el-table-column prop="phone" label="联系电话"></el-table-column>
          <el-table-column
            prop="addTime"
            label="注册时间"
            width="160px"
          ></el-table-column>
          <el-table-column label="状态" width="80px" align="center">
            <template slot-scope="scope">
              <el-link
                type="success"
                :underline="false"
                v-if="scope.row.status == 0"
                >启用</el-link
              >
              <el-link
                type="danger"
                :underline="false"
                v-if="scope.row.status == 1"
                >停用</el-link
              >
            </template>
          </el-table-column>
          <el-table-column
            prop="content"
            label="操作"
            width="80px"
            align="center"
          >
            <template slot-scope="scope">
              <el-dropdown @command="(command) => handle(command, scope.row)">
                <span class="el-dropdown-link">
                  更多
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item
                    command="changeStatus"
                    v-if="scope.row.status == 1"
                    >启用</el-dropdown-item
                  >
                  <el-dropdown-item
                    command="changeStatus"
                    v-if="scope.row.status == 0"
                    >停用</el-dropdown-item
                  >
                </el-dropdown-menu>
              </el-dropdown>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      basic: {},
      list: [],
    }
  },
  created() {
    this.itemList()
  },
  methods: {
    go() {
      //返回
      this.$store.dispatch('tags/delVisitedRoute', {
        path: this.$route.path,
      })
      this.$router.push('/userCenter/member')
    },
    itemList() {
      // 获取列表
      this.$axios
        .get('/admin/member/find?id=' + this.$route.query.id)
        .then((data) => {
          this.basic = {}
          this.list = []
          if (data.code == 200) {
            this.basic = data.data
            this.list = data.data.child
          } else {
            this.$message.error(data.msg)
          }
        })
    },
    handle(command, row) {
      //操作
      if (!command) {
        this.$message.error('菜单选项缺少command属性')
        return
      }
      switch (command) {
        case 'changeStatus':
          //启用停用
          const status = row.status == 0 ? 1 : 0
          this.$axios
            .get(
              '/admin/member/updateStatusChild?id=' +
                row.id +
                '&status=' +
                status
            )
            .then((data) => {
              if (data.code == 200) {
                this.itemList()
                this.$message.success('操作成功！')
              } else {
                this.$message.error(data.msg)
              }
            })
          break
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.card {
  padding-bottom: 20px;
  .title {
    color: #45ab49;
    border-bottom: 1px solid #45ab49;
    padding: 10px 0;
    margin-bottom: 15px;
  }
}
</style>
